<style>
    .attr-group-list .attr-group-item:after {
        display: block;
        content: " ";
        height: 0;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        border-bottom: 1px solid #eee;
    }

    .attr-group-list .attr-group-item {
        margin-bottom: 1rem;
    }

    .attr-group-list .attr-group-item:last-child {
        margin-bottom: 0;
    }

    .attr-group-list .attr-group-item:last-child:after {
        display: none;
    }

    .attr-item {
        display: inline-block;
        position: relative;
        background: #fff;
        padding: .25rem .5rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
        border: 1px solid #eee;
    }

    .attr-group-delete,
    .attr-item .attr-item-delete,
    .attr-row-delete-pic {
        display: inline-block;
        background: #fff;
        border: 1px solid #979797;
        color: #725755 !important;
        text-decoration: none !important;
        width: 1rem;
        height: 1rem;
        line-height: .75rem;
        text-align: center;
        transition: 150ms;
        transform: translateY(-.08rem);
    }

    .attr-group-delete:hover,
    .attr-item .attr-item-delete:hover,
    .attr-row-delete-pic:hover {
        border: 1px solid #ff4544;
        color: #fff !important;
        background: #ff4544;
    }

    td {
        cursor: default;
    }
    .input-td {
        padding: 0 .5rem !important;
        width: 8rem;
        vertical-align: middle;
    }

    .input-td input {
        display: inline-block;
        margin: 0;
        width: 100%;
        border: 1px solid #dde2e6;
        color: inherit;
        text-align: center;
        cursor: text;
        height: 28px;
    }

    .input-td input:focus {
        outline: none;
    }
    .mb-2 {
        margin-bottom: .5rem!important;
    }
    .form-inline {
        display: flex;
        flex-flow: row wrap;
        -webkit-box-align: center;
        align-items: center;
    }

</style>
<div id="app">
    <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <div id="use_attr_show">
        <template>
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-2">年级/班级编辑:</label>
                <div class="col-xs-12 col-sm-9">
                    <div v-if="attr_group_list && attr_group_list.length>0"
                         class="panel mb-3" style="background: #f5f7f9">
                        <div class="panel-body">
                            <div class="attr-group-list">
                                <div v-for="(attr_group,group_index) in attr_group_list"
                                     class="attr-group-item">
                                    <div class="mb-3">
                                        <a :data-group-index="group_index"
                                           class="attr-group-delete" href="javascript:">×</a>
                                        <b>{{attr_group.attr_group_name}}：</b>
                                        <div class="form-inline d-inline-block">
                                            <input class="form-control form-control-sm add-attr-input mr-1"
                                                   placeholder="如：1班、2班">
                                            <a class="btn btn-sm add-attr-btn btn-secondary"
                                               :data-group-index="group_index" href="javascript:">添加班级</a>
                                        </div>
                                    </div>
                                    <div class="attr-list">
                                        <div v-for="(attr,attr_index) in attr_group.attr_list"
                                             class="attr-item">
                                            <a :data-group-index="group_index"
                                               :data-attr-index="attr_index"
                                               class="attr-item-delete"
                                               href="javascript:">×</a>
                                            <span>{{attr.attr_name}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-inline">
                        <input class="form-control add-attr-group-input mr-2"
                               placeholder="如：一年级、初一">
                        <a class="btn add-attr-group-btn btn-default" href="javascript:">添加年级</a>
                    </div>
                </div>
            </div>
            <div v-if="attr_error" class="alert alert-warning rounded-0">{{attr_error}}</div>

            <div class="form-group row" v-if="attr_group_list && attr_group_list.length>0">
                    <table class="table table-bordered table-sm mb-0 bg-white" style="border: 1px solid #f0f0f0;width: 30%">
                        <tr v-for="(attr_row,row_index) in attr_group_list">
                            <td v-for="(attr,attr_index) in attr_row.attr_list"
                                class="text-center">
                                <input
                                        :name="'attr['+row_index+'][attr_group_name]'"
                                        :value="attr_row.attr_group_name?attr_row.attr_group_name:''"
                                        type="hidden">
                                <input :name="'attr['+row_index+'][attr_list]['+attr_index+'][attr_id]'"
                                       :value="attr.attr_id?attr.attr_id:''"
                                       type="hidden">
                                <input :name="'attr['+row_index+'][attr_list]['+attr_index+'][attr_name]'"
                                       :value="attr.attr_name?attr.attr_name:''"
                                       type="hidden">
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </template>
</div>
<!--        <a id="submit" href="javascript:;" class="btn btn-success" style="background-color: #18bc9c">确定</a>-->
<div class="form-group layer-footer">
    <label class="control-label col-xs-12 col-sm-2"></label>
    <div class="col-xs-12 col-sm-8">
<!--        <a id="submit" href="javascript:;" class="btn btn-success" style="background-color: #18bc9c">确定</a>-->
        <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
        <a href="class" onClick="javascript :history.go(-1);" class="btn btn-primary">返回</a>
    </div>
</div>
</form>
</div>
<!--<link rel="stylesheet" href="/assets/css/school/bootstrap.min.css">-->
<script src="/assets/js/vue.js"></script>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    var attr_data = <?php echo $attr_data ?>;
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            attr_group_list: [],
            attr_row_list: [],
            sp_type:0,
            model: [],
            attr_group_count: 0,
            attr: [],
        },
        computed: {
            attr_error: function () {
                var error = false;
                for (var i in this.attr_group_list) {
                    if (!this.attr_group_list[i].attr_list || !this.attr_group_list[i].attr_list.length) {
                        error = this.attr_group_list[i].attr_group_name + '”没有班级，将不会被保存';
                        break;
                    }
                }
                return error;
            },
        },
    });

    app.attr = attr_data.attr;

    setTimeout(function () {
        app.attr_group_list = attr_data.attr_group_list;
    }, 300);
    //规格组组合生成
    function attrGroupGenerate(attr_group_list) {
        if (!attr_group_list.length)
            return [];
        var result = [];
        var results = [];
        var new_group_list = [];

        for (var i in attr_group_list) {
            if (!attr_group_list[i].attr_list || !attr_group_list[i].attr_list.length)
                continue;
            var j=attr_group_list[i].attr_list.length

            if(attr_group_list[i].attr_group_name){
                for(var k=0;k<j;k++){
                    console.log(k)
                    app.attr_group_list[i].attr_list[k].attr_group_name=attr_group_list[i].attr_group_name
                }

            }
            new_group_list.push(attr_group_list[i].attr_list);
        }

        function doExchange(arr, depth) {
            if (!arr[depth])
                return;
            for (var i = 0; i < arr[depth].length; i++) {
                result[depth] = arr[depth][i];
                if (depth != arr.length - 1) {
                    doExchange(arr, depth + 1)
                } else {
                    var row = {
                        attr_list: result,
                        num: 0,
                        price: 0,
                        no: '',
                        pic: '',
                    };
                    results.push(JSON.stringify(row));
                }
            }
        }

        function test(arr) {
            doExchange(arr, 0);
        }

        test(new_group_list);
        var new_results = [];
        for (var i in results) {
            new_results.push(JSON.parse(results[i]));
        }

        return new_results;
    }

    //添加规格组
    $(document).on('click', '.add-attr-group-btn', function () {
        var group_name = $('.add-attr-group-input').val();
        if (group_name == '')
            return;
        var in_array = false;
        for (var i in app.attr_group_list) {
            if (app.attr_group_list[i].attr_group_name == group_name) {
                in_array = true;
                break;
            }
        }
        if (in_array)
            return;
        app.attr_group_list.push({
            attr_group_name: group_name,
            attr_list: [],
        });
        $('.add-attr-group-input').val('');
    });

    //添加规格值
    $(document).on('click', '.add-attr-btn', function () {
        var group_index = $(this).attr('data-group-index');
        var attr_name = $(this).parent().find('.add-attr-input').val();
        if (attr_name == '')
            return;
        var in_array = false;
        for (var i in app.attr_group_list[group_index].attr_list) {
            if (app.attr_group_list[group_index].attr_list[i].attr_name == attr_name) {
                in_array = true;
                break;
            }
        }
        if (in_array)
            return;
        app.attr_group_list[group_index].attr_list.push({
            attr_name: attr_name,
            attr_group_name: app.attr_group_list[group_index].attr_group_name,
        });

        // 如果是单规格的，添加新规格时不清空原先的数据
        app.old_checked_attr_list = app.attr_row_list;
        app.attr_group_count = app.attr_group_list.length;
        var attrList = attrGroupGenerate(app.attr_group_list);
        if (app.attr_group_list.length === 1) {
            for (var i in attrList) {
                if (i > app.old_checked_attr_list.length - 1) {
                    app.old_checked_attr_list.push(attrList[i])
                }
            }
            var newCheckedAttrList = app.old_checked_attr_list;
        } else if (app.attr_group_list.length === app.attr_group_count) {
            for (var pi in attrList) {
                var pAttrName = '';
                for (var pj in attrList[pi].attr_list) {
                    pAttrName += attrList[pi].attr_list[pj].attr_name
                }
                for (var ci in app.old_checked_attr_list) {
                    var cAttrName = '';
                    for (var cj in app.old_checked_attr_list[ci].attr_list) {
                        cAttrName += app.old_checked_attr_list[ci].attr_list[cj].attr_name;
                    }
                    if (pAttrName === cAttrName) {
                        attrList[pi] = app.old_checked_attr_list[ci];
                    }
                }
            }
            var newCheckedAttrList = attrList;
        } else {
            var newCheckedAttrList = attrList;
        }

        $('.add-attr-input').val('');
//        app.attr_row_list = attrGroupGenerate(newCheckedAttrList);
    });

    //删除规格组
    $(document).on('click', '.attr-group-delete', function () {
        var group_index = $(this).attr('data-group-index');
        app.attr_group_list.splice(group_index, 1);
    });

    //删除规格值
    $(document).on('click', '.attr-item-delete', function () {
        var group_index = $(this).attr('data-group-index');
        var attr_index = $(this).attr('data-attr-index');
        app.attr_group_list[group_index].attr_list.splice(attr_index, 1);


        // 如果是单规格的，添加新规格时不清空原先的数据
        app.old_checked_attr_list = app.attr_row_list;
        app.attr_group_count = app.attr_group_list.length;
        var attrList = attrGroupGenerate(app.attr_group_list);
        if (app.attr_group_list.length === 1) {
            var newCheckedAttrList = [];
            for (var i in app.attr_group_list[0].attr_list) {
                var attrName = app.attr_group_list[0].attr_list[i].attr_name;
                for (j in app.old_checked_attr_list) {
                    var oldAttrName = app.old_checked_attr_list[j].attr_list[0].attr_name;
                    if (attrName === oldAttrName) {
                        newCheckedAttrList.push(app.old_checked_attr_list[j]);
                        break;
                    }
                }
            }
        } else if (app.attr_group_list.length === app.attr_group_count) {
            for (var pi in attrList) {
                var pAttrName = '';
                for (var pj in attrList[pi].attr_list) {
                    pAttrName += attrList[pi].attr_list[pj].attr_name
                }
                for (var ci in app.old_checked_attr_list) {
                    var cAttrName = '';
                    for (var cj in app.old_checked_attr_list[ci].attr_list) {
                        cAttrName += app.old_checked_attr_list[ci].attr_list[cj].attr_name;
                    }
                    if (pAttrName === cAttrName) {
                        attrList[pi] = app.old_checked_attr_list[ci];
                    }
                }
            }
            var newCheckedAttrList = attrList;
        } else {
            var newCheckedAttrList = attrList;
        }

//        app.attr_row_list = attrGroupGenerate(app.attr_group_list);
    });

    $('#submit').click(function () {

        console.log(app.attr_group_list);
        /*$.ajax({
            url: 'grade/inc',
            type: 'post',
            data: {'add_attr': chk_value},
            dataType: 'json',
            success: function (data) {
                Fast.config.openArea = ['100%', '100%'];
                Fast.api.open('goods/classadd/index');
            }
        })*/
    })
</script>
